<template>
  <div class="conserve-energy">
    <p class="title">节能减排</p>
    <div class="content">
      <div
        class="num-item"
        v-for="(item, key, index) in panelData"
        :key="index"
      >
        <p class="lable-text">{{ item.label }}</p>
        <p class="value-text">
          <span>{{ item.value }}</span> <span>{{ item.unit }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ConserveEnergy',
  props: {
    todayData: {
      type: Object,
      required: true,
    },
    totalData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chartList: [],
      panelData: {
        totalElectric: {
          label: '累计充电量',
          value: 0,
          unit: '度',
        },
        totalReduceCarbonEmission: {
          label: '累计减少碳排',
          value: 0,
          unit: '吨',
        },
      },
    }
  },
  watch: {
    totalData(val) {
      if ((val.totalElecAmount ?? '') !== '') {
        if (val.totalElecAmount >= 10000) {
          this.panelData.totalElectric.value = (
            val.totalElecAmount / 10000
          ).toFixed(2)
          this.panelData.totalElectric.unit = '万度'
          this.panelData.totalReduceCarbonEmission.value = (
            (val.totalElecAmount * 0.01075) /
            10000
          ).toFixed(2)
          this.panelData.totalReduceCarbonEmission.unit = '万吨'
        } else {
          this.panelData.totalElectric.value = val.totalElecAmount
          this.panelData.totalElectric.unit = '度'
          this.panelData.totalReduceCarbonEmission.value = (
            val.totalElecAmount * 0.01075
          ).toFixed(2)
          this.panelData.totalReduceCarbonEmission.unit = '吨'
        }
      }
    },
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
.conserve-energy {
  width: 100%;
  height: 20%;
  background: url(../../../assets/images/exhibition/rightbg2.png) center center
    no-repeat;
  background-size: 100% 100%;
  padding-left: 10px;
  position: relative;
  overflow: hidden;
  .content {
    height: calc(78% - 40px);
    background: url(../../../assets/images/exhibition/rightbg2b.png) center
      center no-repeat;
    background-size: 100% 100%;
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .num-item {
      .lable-text {
        font-size: 14px;
        color: #ffffff;
      }
      .value-text {
        span:nth-child(1) {
          font-size: 20px;
          font-weight: bold;
          color: #6de3fd;
        }
        span:nth-child(2) {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}
@media screen and (max-width: 1440px) {
  .conserve-energy {
    padding-left: 2px;
    .header {
      .view-more {
        font-size: 12px;
      }
    }
    .content {
      height: calc(78% - 30px);
      width: 90%;
      .num-item {
        .lable-text {
          font-size: 12px;
        }
        .value-text {
          span:nth-child(1) {
            font-size: 14px;
          }
          span:nth-child(2) {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
